<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{border: solid 1px black;}
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>

  const cvs = document.querySelector(".cvs")
  cvs.width = 400;
  cvs.height = 400;

  const c2d = cvs.getContext("2d");

  c2d.arc(200, 200, 100, 0, 2*Math.PI);

  c2d.moveTo(100, 200);
  c2d.lineTo(110, 200);

  c2d.moveTo(290, 200);
  c2d.lineTo(300, 200);
  
  c2d.moveTo(200, 100);
  c2d.lineTo(200, 110);
  
  c2d.moveTo(200, 290);
  c2d.lineTo(200, 300);
  
  c2d.moveTo(150, 200);
  c2d.lineTo(210, 200);
  
  c2d.moveTo(200, 120);
  c2d.lineTo(200, 210);

  c2d.stroke();

  c2d.beginPath();
  c2d.arc(200, 200, 5, 0, 2*Math.PI);
  c2d.fill();

  c2d.textAlign = "center";
  c2d.textBaseline = "middle";
  c2d.fillText("劳力士", 200, 210);
  
</script>
</html>